<template>
	<view class="content">
		<scroll-view class="itembox" scroll-y="true">
			<view v-for="(item, index) in datas" :key="index" class="topic-art">
				<view class="title-top">
					<view class="topic">第{{ index + 1 }}题</view>
					<view class="completion"><text>|</text>{{item.question_type_name}}</view>
					<!-- <view @click="check_favorite(item.question_id, index)" :class="{ active_favorite: item.is_check }" class="favorite">
						<i :class="[item.is_check?'iconpingjiaxingxing':'iconpingjiaxingxing-xian']" class="iconfont"></i>
						<text>收藏</text>
					</view> -->
				</view>
				<view class="long-line"></view>
				<view class="first-title-content"><rich-text :nodes="item.question_title"></rich-text></view>
					
				<view class="analysis_text" v-for="(val,id) in item.answer_list" :key="id">
					<!-- 只有单选题/多选题的选择题列表内容才有显示字母 -->
					<block v-if='item.question_typeid == 1 || item.question_typeid == 2'>
						<text>{{val.number}}</text>、<rich-text :nodes="val.answer"></rich-text>
					</block>
					<!-- 其他原文返回 -->
					<block v-else>
						<rich-text :nodes="val.answer"></rich-text>
					</block>
				</view>
				<!-- 学生答案 -->
				<view class="container-flex-row first-title-content answer1">
					<view>您的答案：</view>
					<view v-for='(item2,index2) in item.interest_lists_log' :key='index2'>
						<!-- 将学生答案的索引值传递作为正确答案的字母 -->
						<block v-if='item.question_typeid == 1 || item.question_typeid == 2'>
							<text>{{item2.number}}</text>
						</block>
						<!-- 原文返回 -->
						<block v-else>
							<text v-for='(item3, index3) in item2.user_text_answer' :key='index3'>{{item3 == '' ? '未答题' : item3}}</text>
						</block>
					</view>
				</view>
				<!-- 正确答案，PS: 只有单选题和多选题需要显示字母，其他则原文返回 -->
				<view class="container-flex-row answer2">
					<view style="flex: none;">正确答案：</view>
					<view v-for='(item2,index2) in item.answer_list' :key='index2'>
						<!-- 将正确答案的索引值传递作为正确答案的字母 -->
						<block v-if='item.question_typeid == 1 || item.question_typeid == 2'>
							<text v-if="item2.is_answer == 1">{{item2.number}}</text>
						</block>
						<!-- 原文返回 -->
						<block v-else>
							<rich-text v-if="item2.is_answer == 1" :nodes='item2.answer'></rich-text>
						</block>
					</view>
				</view>
				<view class="title-flex">
					<text></text>
					<view class="first-title">题目解析</view>
				</view>
				<view class="first-title-content analysis"><rich-text :nodes="item.question_analysis"></rich-text></view>
				<view class="grey-bg"></view>
			</view>
		</scroll-view>
		<view class="bottom">
			<view class="footer" @click="dialogData()">
				<image src="../../static/image/bottom-down.png"></image>
			</view>
			<view class="problue_result" v-if="dislog">
				<view class="prores_type_cont detail_line_bottom">
					<view class="result_list">
						<subject-if v-for="(itme, index) in datas" :key="index" :iftrue="itme.is_answer==2" :num="index + 1"></subject-if>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import subjectIf from '@/components/subject-if/subject-if';
import util from '@/common/util.js';
export default {
	data() {
		return {
			interest_id:'',
			datas: [],
			dataList: '',
			status: false,
			endtime: '',
			starttime: '',
			pid: '' ,//训练id
			dislog: false,
			letter: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N'] // 选择题的内容对应的ABCD...小球，以及正确答案
		};
	},
	components: {
		subjectIf
	},
	onLoad: function(e) {
		this.interest_id=e.interest_id;
		this.$zapi.apiPost('user/Interest.User/InterestAnalysis',{
			interest_id:this.interest_id,
			// is_out_html:2,
			is_get_answer: 2
		}).then(res=>{
			if(res.data.code==200){
				util.latex_reques(res.data.data.question_lists,'question_title');//解析 试题标题 latex 公式转换
				util.latex_reques(res.data.data.question_lists,'question_analysis');//解析 试题解析 latex 公式转换
				util.latex_answer(res.data.data.question_lists,'answer_list');//解析答案选项 latex 公式转换
				// TODO： 暂时不需要用到这个
				// util.latex_answer(res.data.data.interest_lists_log,'interest_lists_log');
				
				this.datas = res.data.data.question_lists
				// 将部分题增加abcd,以便判断过滤判断使用
				this.datas.forEach((item,index) => {
					item.question_type_name = util.getTypeName(item.question_typeid);
					// 学生答案，需要进行判断处理在存储对应的abcd
					item.interest_lists_log.forEach((item2, index2) => {
						item.answer_list.forEach((item3,index3) => {
							// 根据当前学生的ID 与 所有ID 进行匹配，如果符合，就将匹配到的ID的索引值 与 定义的letter索引值进行赋值
							if (item2.question_answer_id == item3.question_answer_id) {
								item2.number = this.letter[index3]
							}
						})
						// 答题卡答案是否正确显示
						if (item2.is_answer == 2) {
							item.is_answer = 2
						}
					})
					// 正确答案
					item.answer_list.forEach((item2,index2) => {
						item2.number = this.letter[index2]
					})
				})
			}
		});
		for (let i = 0; i < this.datas.length; i++) {
			this.datas[i].is_check = false;
		}
	},
	methods: {
		/**
		 * 将当期的收藏值取反
		 */
		check_favorite: function(question_id, id) {
			this.datas[id].is_check = !this.datas[id].is_check;
			if (this.datas[id].is_check) {
				this.$zapi.apiPost('user/Collection.users/CollectionAdd',{question_id:question_id,source_type:4}).then(res=>{
					if(res.data.code==200){
						uni.showToast({
							title: '添加收藏成功！',
							icon: 'none'
						});
					}
				});
			} else {
				this.$zapi.apiPost('user/Collection.users/CollectionDetele',{question_id:question_id}).then(res=>{
					if(res.data.code==200){
						uni.showToast({
							title: '取消收藏成功！',
							icon: 'none'
						});
					}
				});
			}
			/**
			 * 更新数组
			 */
			let leng = this.datas.length;
			this.datas.splice(leng);
		},
		dialogData() {
			this.dislog = !this.dislog;
		}
	}
};
</script>

<style>
html {
	font-size: 26upx;
}
.img {
	display: block;
	max-width: 90%;
	margin: auto;
}
.content {
	position: absolute;
	width: 100%;
	height: 100%;
}

.itembox {
	height: calc(100% - 0upx);
}

.topic-art:last-child{
	margin-bottom: 30upx;
}

.completion {
	text-align: left;
	color: #999999;
	font-size: 36upx;
	display: inline-block;
}
.completion text{
	margin-right: 10upx;
}

.long-line {
	width: 750upx;
	border-top: 1upx solid #e5e5e5;
}

.long-line2 {
	width: 710upx;
	border-top: 1upx solid #e5e5e5;
	margin: 10upx auto;
}

.title-flex {
	width: 750upx;
	height: 52upx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-top: 20upx;
}

.title-flex text{
	width: 36upx;
	height: 36upx;
	background-color: #00D5A2;
	border-radius:0px 10px 10px 0px;
	margin-right: 16upx;
}

.title-bg {
	width: 142upx;
	height: 52upx;
}

.first-title {
	color: #333333;
	font-size: 36upx;
	font-weight: bold;
}
.title-top{
	height: 100upx;
}
.topic{
	color: #FF9900;
	font-size: 36upx;
	font-weight: bold;
	margin: 20upx 10upx 30upx 30upx;
	display: inline-block;
}

.small-title {
	font-size: 24upx;
	margin-top: 2upx;
}

.blue {
	box-shadow: -0.1rem 0.1rem 0.2rem rgba(0, 173, 255, 0.4);
}

.orange {
	box-shadow: -0.1rem 0.1rem 0.2rem rgba(255, 144, 0, 0.4);
}

.red {
	box-shadow: -0.1rem 0.1rem 0.2rem rgba(241, 0, 0, 0.4);
}

.lanse {
	box-shadow: -0.1rem 0.1rem 0.2rem rgba(0, 92, 220, 0.4);
}

.favorite {
	color: #666666;
	position: relative;
	top: -100upx;
    right: 30upx;
    line-height: 18upx;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.favorite i {
	font-size: 45upx;
	text-align: center;
}
/**
 *点击收藏样式开始
 */
.active_favorite {
	color: #FF9900;
}

.active_favorite i {
	font-size: 45upx;
	/* line-height: 71upx; */
}

/**
	 */

.container-flex-row {
	display: flex;
	flex-direction: row;
}

.item1 {
	color: #666666;
	align-items: center;
	margin-bottom: 10upx;
}

.first-title-content {
	font-size: 36upx;
	color: #333333;
	margin-left: 25upx;
}
.analysis_text{
	display: flex;
	font-size: 34upx;
	color: #333333;
	margin-left: 25upx;
}
.space {
	margin-top: 14upx;
}

.answer1 {
	color: #666666;
	margin-top: 14upx;
}

.answer2 {
	color: #00D5A2;
	margin-left: 25upx;
}

.answer1 view,
.answer2 view{
	font-size: 34upx;
}

.analysis {
	color: #666666;
	font-size: 34uox;
	margin: 14upx 25upx;
	line-height: 1.5;
}

.knowledge {
	color: #666666;
	margin-bottom: 10upx;
}

.know2 {
	margin-left: 52upx;
}

.grey-bg {
	border-bottom: 10upx solid #FAFAFA;
}
.dati-item {
	margin-left: 20upx;
}
/* 底部 */
.bottom{
	position: fixed;
	bottom: 0;
	width: 100%;
}
.footer{
	height: 48upx;
	width: 100%;
	background: #F7F7F7;
	border-radius:20px 20px 0px 0px;
}
.footer image{
	width: 68upx;
	height: 16upx;
	margin-left: 341upx;
	margin-top: 16upx;
}

/* 弹窗 */
.problue_result{
	width: 710upx;
	padding: 40upx 30upx 40upx;
	background: #FFFFFF;
}
.prores_type_cont{
	height: auto;
}
.prores_type_title{
	text-align: center;
}
.result_list{
	display: flex;
	flex-wrap: wrap;
}
</style>
